<template>
  <!-- <div>
    <h1>运费管理</h1>
  </div> -->

  <div id="lbgl">
    <div id="sxcx">
      <!-- 弹框1 -->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="添加运费管理" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="地区" prop="area" required>
                <el-input v-model="ruleForm.area" style="width:400px"></el-input>
              </el-form-item>
              <el-form-item label="运费" prop="freight" required>
                <el-input v-model="ruleForm.freight" style="width:200px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <!-- 弹框2 -->
      <div class="tjlb">
        <div class="sxcx_tjlb">
          <el-dialog title="编辑管理" :visible.sync="dialogVisible2" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="地区" prop="area" required>
                <el-input v-model="ruleForm.area" style="width:400px"></el-input>
              </el-form-item>
              <el-form-item label="运费" prop="freight" required>
                <el-input v-model="ruleForm.freight" style="width:200px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editSure">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <!-- 弹框3 -->
      <el-dialog title="提示" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose">
        <div style="line-height:30px">
          <span>金额</span>
          <el-input v-model="setNum" style="margin-left:15px;width:70%" placeholder="请输入金额"></el-input>
        </div>
        <span slot="footer" class="dialog-footer" center>
          <div style="text-align:center">
            <el-button @click="dialogVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="setSure">确 定</el-button>
          </div>

        </span>
      </el-dialog>
    </div>
    <div id="sjlb">
      <div class="clear">
        <span>包邮设置</span>
      </div>
      <div class="clear">
        <div>包邮金额：<i style="margin-right:15px">{{setNum}}</i>
          <template>
            <el-button type="text" @click="setInput">设置</el-button>
          </template>
          <el-button class="sjlb_btn" type="button" @click="dialogVisible = true">添加</el-button>
        </div>
      </div>
      <div class="sjlb_table">
        <el-table :data="sjlbData" border style="width: 100%">
          <el-table-column type="selection" width="40">
          </el-table-column>
          <el-table-column prop="id" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="area" label="地区" width="180">
          </el-table-column>
          <el-table-column prop="freight" label="运费" width="400">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <div slot-scope="scope">
              <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delSure(scope.row)" type="text" size="small">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="sjlb_page">
        <!-- .sync用于当点击页时，nowPage变为点击页-->
        <el-pagination :current-page.sync="nowPage" :page-size="nowNum" layout=" prev, pager, next" :total="lbglData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

      setNum: '',
      lbglData: [],
      input1: '',
      value1: '',
      value: '',
      nowPage: 1,
      nowNum: 5,//每页显示几条数据
      options: [{
        value: '选项1',
        label: '1111',
      }],
      ruleForm: {
        area: '',
        freight: ''

      },
      rules: {
        area: [
          {
            required: true, message: '请填写地区', trigger: 'blur'
          }
        ],
        freight: [
          {
            required: true, message: '请填写运费', trigger: 'blur'
          }
        ],

      },

      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,

    }
  },
  mounted() {
    this.getallLbgl();
  },
  // 计算页码数
  computed: {
    sjlbData() {
      return this.lbglData.slice((this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
    }
  },
  setSure(res) {

  },
  methods: {
    //计算金额
    setInput() {
      this.dialogVisible3 = true;
    },
    setSure() {
      this.dialogVisible3 = false;
      return this.setNum;
    },
    //编辑传数据
    editData(data) {
      this.dialogVisible2 = true;
      this.ruleForm = { ...data };
    },
    // 确认编辑
    editSure(res) {
      this.$axios({
        url: '/oparate/editFreight',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.dialogVisible2 = false;
        // console.log(this.ruleForm)
        this.getallLbgl();
        this.ruleForm = {
          area: '',
          freight: ''

        }
      })
    },
    //刷新所有数据
    getallLbgl() {
      this.$axios({
        url: '/operate/getallfreight',
        method: 'get'
      }).then((res) => {
        console.log(res.data.data);
        this.lbglData = res.data.data;

      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.ruleForm = {
            area: '',
            freight: ''

          }
        })
        .catch(_ => { });
    },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 添加
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      this.$axios({
        url: '/operate/addFreight',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {

        this.dialogVisible = false;
        this.getallLbgl();
        this.ruleForm = {
          area: '',
          freight: ''
        }
      })
    },

    labelPosition() {

    },
    // 删除弹出信息
    delSure(data) {
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    // 删除数据的方法
    del(data) {
      this.$axios({
        url: '/oprate/delFreight',
        method: 'post',
        data: data
      }).then(() => {
        this.getallLbgl();
      })
    },


  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
clear::after {
  content: "";
  display: none;
  clear: both;
}
#lbgl {
  font-size: 12px;
  color: rgb(51, 51, 51);
}

#sjlb {
  background-color: rgb(242, 242, 242);
  padding: 0 15px 30px 15px;
  color: black;
  padding-left: 15px;
}
#sjlb div:first-child {
  font-size: 14px;
  color: rgb(102, 102, 102);
  line-height: 40px;
  margin-bottom: 15px;
}
#sjlb div:first-child span,
#sjlb div:nth-child(2) span {
  float: left;
}
#sjlb div:nth-child(2) span {
  margin: 10px 0 10px 0;
}
#sjlb div:nth-child(2) {
  clear: both;
  padding: 10px 0 10px 0;
  /* line-height: 40px; */
}
#sjlb div:nth-child(2) .sjlb_btn {
  float: right;
  line-height: 25px;
  margin-left: 15px;
  width: 80px;
  margin: 10px 0 10px 15px;
}

#sjlb div:nth-child(2) label {
  margin-right: 5px;
}
/* 表格文字居中对齐 */
#sjlb .sjlb_table /deep/.el-table th > .cell {
  text-align: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

#sjlb .sjlb_table /deep/.el-table .cell {
  text-align: center;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
#sjlb .sjlb_page {
  margin-top: 30px;
  text-align: center;
}
.el-form /deep/ .el-form-item {
  margin: 40px;
}
.el-form .el-form-item /deep/ .el-col {
  margin-top: -40px;
}
.el-form .el-form-item /deep/ .el-col:first-child {
  margin-left: -40px;
}
.el-dialog__body /deep/.el-from {
  text-align: center;
}
.el-form-item__content .el-button {
  width: 80px;
  line-height: 40px;
}
/* 设置金额 */
.el-dialog__footer {
  text-align: center;
}
.dialog-footer /deep/ .el-button {
  line-height: 30px;
  padding: 0 10px;
}
</style>
